function selet(selector){
	var result = document.querySelectorAll(selector);
	if(result.length === 1){
		return result[0]
	}
	return result;
}

function bindEvent(nodeList,eventType,fn){
	for(var i = 0; i < nodeList.length;i++){
		nodeList[i][eventType] = fn
	}
}
		var liList = selet("#imgWrap li");
		var lunboList = selet("#lunbo li");

		var ne = selet("#ne");
		var pr = selet("#pr");
		var next = selet("#next");
		var prev = selet("#prev");
		var dotWrap = selet("#dotWrap");
		var wrap = selet("#wrap");
		// 当前在第几张上
		var n = 0;
		// 当前动画是否正在执行
		var isAnimation = false;

		// 动态生成小圆点
		for(var i = 0; i < liList.length;i++){
			var span = document.createElement('li')
            span.setAttribute("data-index",i)
            span.innerHTML=i+1
			dotWrap.appendChild(span)
			if(i === 0){
				span.className = "focus"
			}
		}
        
		var dotList = selet("#dotWrap li")
		var lunboList = selet("#lunbo li");
		function changeImg(){
			// 隐藏所有图片 
			for(var i = 0; i < liList.length;i++){
				liList[i].className = ""
				dotList[i].className = ""
				lunboList[i].className=""
			}

			dotList[n].className = "focus";

			// 显示第n张图片
			liList[n].className = "show";
			lunboList[n].className="show"
			liList[n].style.opacity = 0;
			isAnimation = true;
			var fade = setInterval(function(){
				var o = parseFloat(liList[n].style.opacity);
				if(o >= 1){
					clearInterval(fade);
					isAnimation = false;
					return;
				}
				liList[n].style.opacity = o + 0.02;
			},16)

		}


		next.onclick = function(){
			if(isAnimation){
				return;
			}

			if(n < liList.length - 1){
				n++
			}
			else{
				n = 0
			}

			changeImg()
		}
		ne.onclick = function(){
			if(isAnimation){
				return;
			}

			if(n < liList.length - 1){
				n++
			}
			else{
				n = 0
			}

			changeImg()
		}
		prev.onclick = function(){
			if(isAnimation){
				return;
			}

			if(n===0){
				n = liList.length - 1
			}
			else{
				n--
			}

			changeImg()
		}

		pr.onclick = function(){
			if(isAnimation){
				return;
			}

			if(n===0){
				n = liList.length - 1
			}
			else{
				n--
			}

			changeImg()
		}
		bindEvent(dotList,"onclick",function(){
			if(isAnimation){
				return;
			}
			n = this.getAttribute("data-index");
			changeImg()
		})




		var autoPlay = setInterval(function(){
			next.click()
			ne.click()
		},3000)

		wrap.onmouseenter = function(){
			clearInterval(autoPlay)
		}

		wrap.onmouseleave = function(){
			autoPlay = setInterval(function(){
				next.click()
				ne.click()
			},3000)
		}




		let dlList = selet("#ul li");
		
		bindEvent(dlList,"onmouseover",function(){
				
				for(let i = 0; i < dlList.length;i++){
					dlList[i].setAttribute("data",i)
					dlList[i].className = ""
					m= this.getAttribute("data");
				
				}
				 dlList[m].className = "active"
				
			})


			// 粘性定位
		let posi=selet("#posi")
		// console.log(posi)
		let div=selet("#opti li .div3")
		// console.log(div)
		window.onscroll=function(){
			let scrotop=document.documentElement.scrollTop;
			// console.log(scrotop);
			if(scrotop>=300){
				posi.style.display="block";
				

			}
			else{
				posi.style.display="none";
			
			}
		}
	